<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <title>Title</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css">
  <link rel="stylesheet" href="css/index.css">
  <!-- 引入组件 -->
  <script src="js/rem.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.0/lib/vant.min.js"></script>
  <script src="js/axios.js"></script>
  <script src="js/api.js"></script>
</head>
<body>
<div id="app">
  <!--顶部-->
  <div class="tab">
    <div class="tab-item" :class="[tabIndex == index && 'active']" v-for="(item,index) in class_list" :key="index"
         @click="selTab(index)">{{item.name}}
    </div>
    <div class="tab-position"
         :style="'left:'+ Number(tabIndex)*(100 / class_list.length) +'%; width: '+ (100 / class_list.length) + '%'">
      <div class="tab-line"></div>
    </div>
  </div>
  <!--课程列表-->
  <div class="class-type">
    <div class="item" v-for="(item,index) in details.course" :key="index"
         @click.stop="toDetails(item.type)">
      <span class="icon" :class="[item.type==1 && 'yyk-icon',item.type==2 && 'jck-icon',item.type==3 && 'gjk-icon']"></span>
      <div class="content">
        <span>{{item.name}}</span>
        <span>免费试听</span>
      </div>
      <span class="jt-icon"></span>
    </div>
  </div>
  <!--详细介绍-->
  <div class="details">
    <div class="title">详细介绍</div>
    <div class="content" v-html="details.content">
      <!--<p>-->
        <!--<span style="color: rgb(103, 106, 108); fontFamily: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; text-align: right; background-color: rgb(255, 255, 255);">这里是韩语中级班简介</span>-->
      <!--</p>-->
    </div>
  </div>
  <!--底部-->
  <div class="bottom">
    <div class="service" @click="todownload()">
      <span class="icon"></span>
      <span class="text">客服</span>
    </div>
    <div class="price">¥<span class="num">{{details.money}}</span></div>
    <div class="btn" @click="todownload()">立即购买</div>
  </div>
</div>
</body>
<script>
  let vant = window.vant;
  let app = new Vue({
    el: '#app',
    data: {
      langId: 5,
      class_list: [
        {
          name: '初级班',
          type: 1
        },
        {
          name: '中级班',
          type: 2
        },
        {
          name: '高级班',
          type: 3
        },
      ],//班级类型，初级班1，中级班2，高级班3，默认1（初级班）
      tabIndex: 0,
      details: {
        title:"韩语中级班",
        langId:5,
        langName:"韩语",
        langIcon:"https://boxue-resource.oss-cn-shenzhen.aliyuncs.com/lang_icon/2019072709514895038.png",
        classId:9,
        course:[
          {
            type:1,
            name:"语音课"
          },
          {
            type:2,
            name:"基础课"
          },
          {
            type:3,
            name:"高级课"
          }
        ],
        content:`<p><span style="color: rgb(103, 106, 108); font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; text-align: right; background-color: rgb(255, 255, 255);">这里是韩语中级班简介</span></p>`,
        money:"0.00",
        hasBuy:0
      },
    },
    methods: {
      // 切换状态
      selTab(index) {
        this.tabIndex = index
        this.getIntroduce(this.langId,this.class_list[this.tabIndex].type)
      },
      toDetails(courseType) {
        window.location.href = `play.html?classId=${this.details.classId}&courseType=${courseType}`;
      },
      todownload(){
        window.location.href = 'download.html'
      },
      // 获取地址栏参数的方法
      getUrlParam(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        let r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
      },
      // 获取课程介绍
      getIntroduce(langId,type){
        api.getIntroduce({
          langId: langId,
          type: type
        }).then(res=>{
          console.log(res,'获取课程介绍');
          if (res.msg == 'success') {
            document.title = res.data.title;
            this.details = res.data;
          }else{
            vant.Toast(res.msg)
          }
        })
      }
    },
    mounted() {
      let langId= this.getUrlParam('langId');
      let title = this.getUrlParam('title');
      if (langId && title){
        document.title = title;
        this.langId = langId;
        this.getIntroduce(this.langId,this.class_list[this.tabIndex].type)
      }else{
        vant.Toast('参数出错')
      }
    },
  })
</script>
</html>
